<template>
	<view class="list">
		<view class="item" v-for="(item,index) in goodsList" :key="item.id">
			<navigator :url= "'comment-detial?id='+item.id+'&topic_id='+id">
				<view class="item-top">
					<image class="item_img" :src="item.avatar" mode=""></image>
					<view class="tittle">
						<view class="tittle_top">
							<text class="font_18 color_6" v-if="item.is_private == 0">{{item.nickname}}</text>
							<text class="font_18 color_6" v-if="item.is_private == 1">******</text>
							<text class=" color_9">...</text>
						</view>
						<!-- <text class="font_16 color_6">资深卖家/昆明</text> -->
						<text class="img_list" v-if="type=='image'">
							<image src="../../static/img/1/106.png" mode=""></image>
							<image src="../../static/img/1/106.png" mode=""></image>
							<image src="../../static/img/1/106.png" mode=""></image>
						</text>
						<text class="text_list" v-if="type=='text'">
							{{item.content}}
						</text>
						<text class="font_16 color_9" v-if="type=='image'"></text>
					</view>

				</view>
				<view class="bottom">
				<view class="font_14 color_9">{{item.create_time_text}}</view>
				<view class="font_14 color_9">
					<image class="icon" src="../../static/img/6/6-7.png" mode="aspectFit"></image>
					{{item.like}}
					<image style="margin-left: 60rpx;" class="icon" src="../../static/img/6/6-8.png" mode="aspectFit"></image>
					{{item.comment}}
				</view>
			</view>
		   </navigator>
		</view>
		<view class="nomore" v-if="show">没有更多了</view>
	</view>


</template>

<script>
	export default {
		name: "list",
		data() {
			return {
				goodsList: [],
				page:1,
				limit:5,
				show:false
				
			}
		},
		props: [
			"type",
			"id",
			"flag"
		],
		async onLoad() {
			

			this.getlist()
		},
		watch:{
			"id":function(){
				this.page = 1
				this.$Request.post4(
					this.$api.httpApi.special.comment, {
						topic_id:this.id,
						limit:this.limit,
						page:this.page
					}
				).then(res => {
					if (res.code == 1) {
						this.goodsList = res.data.data
						if(res.data.data.length<this.limit){
							this.show = true
						}else{
							this.page+=1
							this.show = false
						}
				
					}
				})
			},
			"flag":function(){
				this.page = 1
				this.$Request.post4(
					this.$api.httpApi.special.comment, {
						topic_id:this.id,
						limit:this.limit,
						page:this.page
					}
				).then(res => {
					if (res.code == 1) {
						this.goodsList = res.data.data
						if(res.data.data.length<this.limit){
							this.show = true
						}else{
							this.page+=1
							this.show = false
						}
				
					}
				})
			}
		},
		methods:{
			getlist(){
				let that = this;
				that.$Request.post(
					that.$api.httpApi.search.search+"&token="+this.$SysCache.get('token'), {
						queryCondition: {
							order: [{
								fieldname: "iOrder",
								direction: "asc"
							}],
							pageindex: 1,
							pagesize: 12,
							where: [{
								fieldname: "keyword",
								valuefrom: this.key
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						console.log(res)
				         that.goodsList = res.data.data
					}
				})
				
			},
			getData(page){
					if(page){
						this.page = page
					}
					this.$Request.post4(
						this.$api.httpApi.special.comment, {
							topic_id:this.id,
							limit:this.limit,
							page:this.page
						}
					).then(res => {
						if (res.code == 1) {
							
							this.goodsList = this.goodsList.concat(res.data.data)
							if(res.data.data.length<this.limit){
								this.show = true
								this.$emit("setloading",true)
							}else{
								this.page+=1
								this.show = false
								this.$emit("setloading",false)
							}
					
						}
					})
				
				
			},
			setPage(val){
				this.page = val
			}
			
		}




	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		background: #fff;
		margin-bottom: 10rpx;
		padding: 0 5%;
		.item-top{
			padding:20upx 0;
		}
	}

	.item_img {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.icon {
		width: 34rpx;
		height: 36rpx;
		vertical-align: middle;
		margin-right: 5rpx;
	}

	.tittle {
		width: 55%;
		padding-left: 20rpx;
	}

	.tittle text {
		display: block;
		margin-bottom: 10rpx;
	}

	.img_list image {
		width: 190rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.text_list {
		font-size: 23upx;
		color: #666;
	}

	.img_list image:nth-child(3n) {
		margin-right: 0rpx;
	}

	.item .img_list {
		display: flex;
		width: 100%;
	}

	.item .tittle {
		width: 90%;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		padding-right: 10upx;
		padding: 20upx 20upx 20upx 90upx;
	}

	.bottom navigator image {
		margin-left: 30rpx;
	}

	.tittle_top {
		display: flex;
		justify-content: space-between;
		padding-right: 20upx;
	}

	.item-top {
		display: flex;
		border-bottom: 1px solid #F2F2F2;
		padding-bottom: 20upx;
	}
	.nomore{
		width: 100%;
		height: 71upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
		background: #E9E9E9;
	}
</style>
